<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="我要找活">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 搜索 -->
		<view class="liucheng d-flex align-items justify-content-center">
			<view class="search">
				<u-search placeholder="请输入要查询的内容" placeholderColor="#C9CDD4" :actionStyle="actionStyle" shape="square"
					v-model="keyword" @search="search"></u-search>
			</view>
		</view>
		<!-- 筛选角色 -->
		<view class="d-flex align-items justify-content-space-between juese">
			<view class="d-flex align-items">
				<view :class="juese_current == juese.id ? 'juese_name-xz' : 'juese_name'" :current="juese_current"
					@click="jueseClick(juese)" v-for="(juese,index1) in jueseItem" :key="index1">{{juese.name}}</view>
			</view>
			<view class="d-flex align-items">
				<view class="d-flex align-items" style="margin-right: 30rpx;">
					<view class="diqu_sx" @click="yezhu = true">{{yezhu_txt}}</view>
					<image class="sanjiao" src="../static/del_img.png" @click="del_data" mode="widthFix"
						v-if="yezhu_txt !== '业主选择'"></image>
					<image class="sanjiao" src="../static/down.png" mode="widthFix" v-else></image>
				</view>
				<view class="d-flex align-items" style="margin-right: 30rpx;">
					<view class="diqu_sx" @click="showcity = true">{{adress}}</view>
					<image class="sanjiao" src="../static/del_img.png" @click="del_data" mode="widthFix"
						v-if="adress !== '地区'"></image>
					<image class="sanjiao" src="../static/down.png" mode="widthFix" v-else></image>
				</view>
				<!-- <view class="d-flex align-items" @click="show_gz=true">
					<view class="diqu_sx">{{gz_name}}</view>
					<image class="sanjiao" v-if="gz_name == '选择工种'" src="../static/shaixuan.png" mode="widthFix">
					</image>
					<image class="sanjiao" @click="del_shaixuan" v-else src="../static/del_img.png" mode="widthFix">
					</image>
				</view> -->
			</view>
		</view>
		<!-- 选择市区筛选 -->
		<u-picker :show="showcity" ref="uPicker" @cancel="showcity=false" :columns="columns" @confirm="confirm"
			@change="changeHandler" keyName="t_name"></u-picker>
		<!-- 业主角色筛选 -->
		<u-picker :show="yezhu" :columns="columns_yezhu" @confirm="confirm_yezhu" @cancel="yezhu=false" keyName="label"></u-picker>
		<!-- 选择工种弹窗 -->
		<view class="">
			<u-popup :show="show_gz" mode="right" @close="show_gz=false">
				<view class="top-choose">
					<view class="pop-top-nav">
						<u-navbar title="选择工种" @leftClick="show_gz=false"></u-navbar>
					</view>
					<!-- 内容 -->
					<view class="d-flex">
						<scroll-view scroll-y="true" class="scroll-Y">
							<view :class="current == gongzhong_item.id ? 'left_info' : ''" :current="current"
								v-for="(gongzhong_item, index) in gongzhong_items" :key="index">
								<view class="gongzhong_list" @click="frist_gz(gongzhong_item)">
									<view :class="current == gongzhong_item.id ? 'gz-frist-xz' : 'gz-frist'">
										{{gongzhong_item.name}}
									</view>
								</view>
							</view>
						</scroll-view>


						<scroll-view scroll-y="true" class="scroll-shi">
							<view class="right_info" :current="next_current"
								v-for="(next_gz_item, index) in next_gz_items" :key="index">

								<view class="next_gz_list" @click="next_gz(next_gz_item)">
									<view :class="next_current == next_gz_item.id ? 'gz-frist-next' : 'gz-frist' ">
										{{next_gz_item.name}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 我要招工 -->
		<view class="">
			<view class="scroll-view-item_H" v-for="(company,index) in companyLists" :key="index">
				<view class="d-flex gs-list" @click="go_zhaogong_detail(company)">
					<image class="touxiang-img" :src="company.user.avatar" mode="widthFix"></image>
					<view class="">
						<view class="name-t">{{company.userinfo.company_contact ? company.userinfo.company_contact : company.userinfo.name}}</view>
						<view class="gongsi_t" v-if="company.userinfo.company_name">{{company.userinfo.company_name}}</view>
						<view class="d-flex">
							<view class="shenfen">{{company.group.name}}</view>
						</view>

					</view>
				</view>
				<view class="" @click="go_zhaogong_detail(company)">
					<view class="geyan">{{company.content}}</view>
				</view>
				
				<view class="type-list d-flex align-items flex-wrap" @click="go_zhaogong_detail(company)">
					<view class="type-list-m" v-if="company.jiegouname">{{company.jiegouname}}</view>
					<view class="type-list-m" v-if="company.wudingname">{{company.wudingname}}</view>
					<view class="type-list-m" v-if="company.mianji">{{company.mianji}}m²</view>
					<view class="type-list-m" v-if="company.jiegouname">{{company.jiegouname}}</view>
					<view class="type-list-m" v-if="company.wudingname">{{company.wudingname}}</view>
					<view class="type-list-m" v-if="company.yangtai">阳台{{company.yangtai}}m²</view>
					<view class="type-list-m" v-if="company.tingyuan">庭院{{company.tingyuan}}m²</view>
					<view class="type-list-m" v-if="company.jinshen">长{{company.jinshen}}m</view>
					<view class="type-list-m" v-if="company.miankuan">宽{{company.miankuan}}m</view>
					<view class="type-list-m" v-if="company.ceng">{{company.ceng}}层</view>
					<view class="type-list-m" v-if="company.dixiashi == 1">有地下室</view>
				</view>
				<view class="pinglun d-flex align-items justify-content-space-between ">
					<view class="company-t d-flex align-items" @click="go_zhaogong_detail(company)">
						{{company.shijian}}·{{company.cityname}} {{company.areaname}}
					</view>
					<view class="d-flex align-items justify-content-space-between ">
						<view class="d-flex align-items">
							<view class="d-flex align-items pinglun-magin" @click="go_zhaogong_detail(company)">
								<image class="pinlun" src="../static/pinlun_icon@1x.png" mode="widthFix"></image>
								<view class="plnum">{{company.pinglun}}</view>
							</view>
							<view class="d-flex align-items" @click="dianzan_click(company)">
								<image class="pinlun" v-if="company.is_zan == 1" src="../static/dainzan_yd_icon@1x.png" mode="widthFix"></image>
								<image class="pinlun" v-else src="../static/dainzan_icon@1x.png" mode="widthFix"></image>
								<view :class="company.is_zan == 1 ? 'plnum_xz' : 'plnum'">{{company.zan}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getgongzhongtree,
		getXinxilist,
		getusergroup,
		setlike
	} from '@/api/user.js'
	import {
		tree
	} from '@/api/citys.js'
	export default {
		data() {
			return {
				keyword: '',
				show_gz: false,
				showcity: false,
				yezhu: false,
				page:1,
				limit:7,
				columns_yezhu:[],//业主筛选
				yezhu_txt:'业主选择',
				yezhu_id:'',
				adress: '地区',
				columns: [],
				cityid: '',
				actionStyle: {
					color: '#FF6400',
					fontSize: '30rpx',
				},
				juese_current: 0,
				jueseItem: [{
						id: 0,
						name: '建房',
					},
					{
						id: 1,
						name: '装修',
					}
				],
				current: 0, //选择工种当前值
				gongzhong_items: [], //选择工种数组
				next_current: 0,
				next_gz_items: [], //工种下一级
				gz_name: '选择工种',
				companyLists: [],
			}
		},
		async onLoad() {
			await this.getProvinces()
			await this.get_juese_list()
			this.get_gongzhong_list()
			this.get_xinxi_list()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search(e) {
				console.log("eaa", e);
			},
			// 点赞
			dianzan_click(e){
				if(!uni.getStorageSync('token')) {
					uni.showToast({
						title:'请登录后查看',
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},500)
					return
				}
				console.log("点赞",e);
				var data = {
					content_id: e.content_id
				}
				setlike(data).then(res => {
					console.log("点赞文章",res);
					this.get_xinxi_list()
				})
			},
			jueseClick(e) {
				console.log("角色切换",e);
				this.juese_current = e.id
				this.get_xinxi_list()
			},
			go_zhaogong_detail(e) {
				if(!uni.getStorageSync('token')) {
					uni.showToast({
						title:'请登录后查看',
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},500)
					return
				}
				uni.navigateTo({
					url:'/pagesA/zhaogong/zhaogong_detail?id=' + e.group_id + '&user_id=' + e.user_id + '&content_id=' + e.content_id
				})
			},
			// 获取角色类别列表
			async get_juese_list() {
				await getusergroup({}).then(res => {
					console.log("获取会员类别列表", res);
					if (res.code == 1) {
						let b = []
						for (let s of res.data.group) {
							b.push({
								label: s.name,
								id:s.id,
							})
						}
						this.columns_yezhu = [b]
					}
				})
			},
			confirm_yezhu(e){
				console.log("点击确认城市", e);
				this.yezhu_txt = e.value[0].label
				this.yezhu_id = e.value[0].id
				this.yezhu = false
				this.get_xinxi_list()
				this.page = 1
			},
			// go_zhaogong_detail(e) {
			// 	console.log("招工详情",e);
			// 	uni.navigateTo({
			// 		url: '/pagesA/zhaogong/zhaogong_detail?content_id=' + e.content_id + '&id=' + e.group_id
			// 	})
			// },
			// 省市区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columns[0][index].children)
					// picker.setColumnValues(2, this.columns[0][index].children[0].children)
				}
				// if (columnIndex === 1) {
				// 	console.log(e, indexs);
				// 	// picker为选择器this实例，变化第二列对应的选项
				// 	picker.setColumnValues(2, this.columns[0][indexs[0]].children[indexs[1]].children)
				// }
				console.log("columnIndex", columnIndex);
			},
			// 获取省市县接口数据
			async getProvinces() {
				var data = {
					pid: 0
				}
				await tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.columns[0] = res.data
						this.columns[1] = res.data[0].children
						// this.columns[2] = res.data[0].children[0].children
					}
				})
			},
			confirm(e) {
				console.log("点击确认城市", e);
				this.adress = e.value[1].name
				this.cityid = e.value[1].id
				this.showcity = false
				this.get_xinxi_list()
				this.page = 1
			},
			// 清楚地区筛选项
			del_data() {
				this.cityid = ''
				this.adress = '地区'
				this.yezhu_txt = '业主选择'
				this.yezhu_id = ''
				this.get_xinxi_list()
				this.page = 1
			},
			// 获取信息列表
			get_xinxi_list() {
				let type = ''
				if (this.juese_current == 0) {
					type = '1'
				} else {
					type = '2'
				}
				var data = {
					page: this.page,
					limit: this.limit,
					type: type,
					city: this.cityid,
					keyword: this.keyword,
					// gongzhong_id: this.next_current,
					group_id: this.yezhu_id
				}
				getXinxilist(data).then(res => {
					console.log("获取jianfang、zhuangxiu列表", res);
					if(res.code == 1){
						this.companyLists = res.data.list
					}
				})
			},
			// 获取工种列表
			get_gongzhong_list() {
				getgongzhongtree({}).then(res => {
					console.log("获取工种", res);
					if (res.code == 1) {
						this.gongzhong_items = res.data
					}
				})
			},
			// 点开第一级工种列表
			frist_gz(e) {
				console.log("点击工种列表", e);
				this.current = e.id
				if (!e.children) {
					this.next_gz_items = []
				} else {
					let a = [];
					for (let s of e.children) {
						a.push({
							name: s.name,
							id: s.id,
						})
					}
					this.next_gz_items = a
				}
			},
			// 选择工种下一级
			next_gz(e) {
				this.next_current = e.id
				this.gz_name = e.name
				setTimeout(() => {
					this.show_gz = false
				}, 500)
				this.get_xinxi_list()
			},
			// 清除工种筛选
			del_shaixuan(){
				this.next_current = ''
				this.gz_name = '选择工种'
				this.get_xinxi_list()
				this.page = 1
			},
		}
	}
</script>

<style>
	/* 选择工种 start */
	.scroll-shi {
		height: calc(100vh - 100rpx);
		width: 60%;
	}

	.scroll-Y {
		height: calc(100vh - 100rpx);
		width: 40%;
		background-color: #F7F8FA;
	}

	.scroll-shi-width {
		width: 85%;
	}

	.next_gz_list {
		width: 85%;
		margin: auto;
	}

	.right_info {}

	.gz-frist-next {
		font-size: 28rpx;
		color: #FF6400;
		text-align: center;
		font-weight: 600;
		line-height: 70rpx;
		border-bottom: 1px solid #eee;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.gz-frist-xz {
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		font-weight: 600;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.gz-frist {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		line-height: 70rpx;
		border-bottom: 1px solid #eee;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.gongzhong_list {
		width: 85%;
		margin: auto;
	}

	.left_info {
		background-color: #FF6400;
	}

	.pop-top-nav {
		width: 750rpx;
		background-color: #fff;
		height: 177rpx;
		border-bottom: 1px solid #eee;
	}

	.top-choose {
		width: 750rpx;
	}

	/* 选择工种end */

	.sex,
	.sui {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
		margin-right: 22rpx;
	}

	.zh_shenfen {
		font-size: 22rpx;
		color: #4B8AFF;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		border: 1.07px solid #CBDDFF;
		background: rgba(75, 138, 255, 0.08);
		margin-left: 13rpx;
	}

	.shenfen {
		display: flex;
		font-size: 24rpx;
		color: #FF4D4F;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		background: #FDF2F2;
		margin-top: 8rpx;
	}

	.plnum_xz {
		font-size: 26rpx;
		color: #FF4D4F;
		margin-left: 10rpx;
	}

	.plnum {
		font-size: 26rpx;
		color: #9E9E9E;
		margin-left: 10rpx;
	}

	.pinlun {
		width: 45rpx;
		display: block;
	}

	.pinglun-magin {
		margin-right: 78rpx;
	}

	.pinglun {
		width: 650rpx;
		margin: auto;
		margin-top: 30rpx;
	}

	.dwImg {
		width: 32rpx;
		display: block;
	}

	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.zh_name-t {
		font-size: 32rpx;
		font-weight: 600;
		color: #444;
	}

	.name-t {
		font-size: 26rpx;
		font-weight: 600;
		color: #444;
	}
	.gongsi_t{
		font-size: 24rpx;
		color: #444;
	}

	.touxiang-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: block;
		margin-right: 16rpx;
	}

	.gs-list {
		width: 640rpx;
		margin: auto;
		padding-top: 30rpx;
	}

	.geyan {
		width: 640rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
		margin: auto;
		margin-top: 25rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.scroll-view-item_H {
		width: 690rpx;
		padding-bottom: 30rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 20rpx auto;
	}

	.diqu_sx {
		font-size: 28rpx;
		color: #1A1A1A;
	}

	.juese_name-xz {
		font-size: 30rpx;
		font-weight: normal;
		color: #FF6400;
		margin-right: 40rpx;
	}

	.juese_name {
		font-size: 30rpx;
		font-weight: normal;
		color: #1D2129;
		margin-right: 40rpx;
	}

	.sanjiao {
		width: 40rpx;
		display: block;
	}

	.juese {
		width: 690rpx;
		margin: 30rpx auto;
	}
	page {
		padding-bottom: 50rpx;
	}

	.company-t {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.type-list {
		margin-left: 24rpx;
		margin-top: 20rpx;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #545454;
		border-radius: 4.5px;
		background: #F5F5F5;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.line {
		width: 48rpx;
		height: 4rpx;
		margin: auto;
		margin-top: 0rpx;
		background: #FF6400;
	}

	.jf-w-t-xz {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		color: #FF6400;
	}

	.jf-w-t {
		font-size: 32rpx;
		font-weight: normal;
		text-align: center;
		color: #1D2129;
	}

	.jf-w {
		width: 50%;
		text-align: center;
		line-height: 80rpx;
		padding-top: 20rpx;
	}

	.tabs_change {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 2rpx;
	}

	.search {
		width: 690rpx;
		margin: auto;
	}

	.liucheng {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
	}

	page {
		background-color: #F7F8FB;
	}
</style>
